@import './global.scss';
@import './el-cover/index.scss';
@import './common.scss';
@import './jxtech-cover/index.scss';

:root {
    // 基础样式设置
    --jxtech-color-white    : #fff;
    --jxtech-base-font-color: #606266;
    //字体
    --jxtech-base-font-size : 14px;
    --jxtech-base-font-color: rgba(255, 255, 255, 0.8);

    // --------- 头部 ---------
    --jxtech-header-background-color            : #1891ff;
    --jxtech-header-background-color-hover      : #1168b9;
    --jxtech-header-menu-color                  : #666;
    --jxtech-header-menu-background-color-active: rgba(000, 000, 000, 0.2);
    --jxtech-border-active                      : 1px solid rgba(255, 255, 255, 0.6);
    // 宽高
    --jxtech-header-height                      : 70px;

    // 边框
    --jxtech-base-border: 1px solid rgba(255, 255, 255, 0.6);
    --jxtech-card-border: 1px solid #dcdfe6;

    // -------- 侧边栏 ---------
    --jxtech-aside-background-color              : #fff;
    --jxtech-submenu-title-background-color      : rgba(249, 249, 249);
    --jxtech-submenu-title-color                 : #999;
    --jxtech-submenu-title-border                : 1px solid rgba(233, 233, 233, 1);
    --jxtech-submenu-item-background-color       : #fff;
    --jxtech-submenu-item-background-color-hover : rgba(24, 145, 255, 0.2);
    --jxtech-submenu-item-background-color-active: rgba(17, 135, 247, 0.1);
    --jxtech-submenu-item-border-active          : 2px solid rgb(64, 158, 255);
    --jxtech-submenu-item-active-color           : rgb(64, 158, 255);
    --jxtech-aside-shadow                        : 1px 1px 3px 1px rgba(133, 133, 133, 0.15);

    // --------- 主体区域 ---------
    //宽高
    --jxtech-fit-height: calc(100vh - 136px);

    // padding
    --jxtech-main-padding      : 10px;
    --jxtech-card-border-radius: 4px;

    // 面包屑
    --jxtech-breadcrumb-height          : 56px;
    --jxtech-breadcrumb-background-color: #fff;
}

// 利用root变量更换主题
// :root {
//     --theme-color: red
//         /* css 变量赋值位置 */
// }

// .title {
//     color: var(--theme-color)
//         /* 用css变量标记颜色 */
// }
// <h3 class="title">CSS 变量换肤</h3> 
// <script>
// function changeColor(color = 'blue') {
//   document.documentElement.style.setProperty("--theme-color",color);
// }
// </script>